<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 小功能(各种对其情况)</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  h4{padding: 5px;}
  .flex{display: flex; display: -webkit-flex; /* Safari */ }
  .wrap{width: 100%; max-width: 1200px; padding: 20px 0; margin:0 auto 50px; background: #ccc;}
  .box{background: #fff; width: 100px; height: 100px;}
  .flex-center{justify-content:center;}
  .flex-between{justify-content:space-between; }
  .flex-height-center{align-items:center;}
  .flex1{flex:1 1 auto;}
  </style>
</head>

<body>
<div class="wrap">
  <h4>项目居中 [justify-content:center;]</h4>
  <div class="flex flex-center">
    <div class="box">111111111111</div>
    <div class="box" style="height: 20px;">222222222222</div>
  </div>
</div>

<div class="wrap">
  <h4>两个元素中心线居中对其 [align-content:center;]</h4>
  <div class="flex flex-height-center">
    <div class="box">111111111111</div>
    <div class="box" style="height: 20px;">222222222222</div>
  </div>
</div>

<div class="wrap">
  <h4>在元素两端 [justify-content:space-between;]</h4>
  <div class="flex flex-between">
    <div class="box">111111111111</div>
    <div class="box">222222222222</div>
  </div>
</div>

<div class="wrap">
  <h4>垂直居中 [align-content:center;]</h4>
  <div class="flex flex-center flex-height-center" style="height: 180px;">
    <div class="box">111111111111</div>
  </div>
</div>

<div class="wrap">
  <h4>另一半自动适应 [flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写]</h4>
  <div class="flex" style="height: 180px;">
    <div class="box">111111111111</div>
    <div class="box flex1" style="background: #ff0;">555555555555555555555</div>
  </div>
</div>

</body>

</html>
